<template>
    <div class="medicine">
        <SqTable ref="sqTable" :requestApi="getTableList" :initParam="initParam" :pagination='false'>
            <template #tableHeader="scope">
                <div class="'btn'">
                    <el-button type="primary" :icon="CirclePlus" @click="openDialog('新增')"> 新增 </el-button>
                    <el-button type="danger" plain :icon="Delete" v-if="scope.isSelected"
                        @click="batchDelete(scope.selectedListIds)"> 批量删除 </el-button>
                </div>

            </template>
            <el-table-column type='selection' width="70" align="center" />
            <el-table-column type='index' width="70" label="序号" align="center" />
            <el-table-column prop="name" label="人体常数名称" align="center" />
            <el-table-column prop="section" label="性别" align="center">
                <template #default="scope">
                    <div v-for="item in scope.row.section" :key="item._id" class="text">
                        <span>{{ `${item.gender == "1" ? "男" : "女"}` }}</span>
                    </div>
                </template>
            </el-table-column>

            <el-table-column prop="section" label="年龄范围" align="center">
                <template #default="scope">
                    <div v-for="item in scope.row.section" :key="item._id" class="text">
                        <span>{{ `${item.start_age}岁~${item.end_age}岁` }}</span>
                    </div>
                </template>
            </el-table-column>

            <el-table-column prop="section" label="稳态最小值" align="center">
                <template #default="scope">
                    <div v-for="item in scope.row.section" :key="item._id" class="text">
                        <span>{{ `${item.min_value}` }}</span>
                    </div>
                </template>
            </el-table-column>

            <el-table-column prop="section" label="平衡位置数据值" align="center">
                <template #default="scope">
                    <div v-for="item in scope.row.section" :key="item._id" class="text">
                        <span>{{ `${item.balance_value}` }}</span>
                    </div>
                </template>
            </el-table-column>

            <el-table-column prop="section" label="稳态最大值" align="center">
                <template #default="scope">
                    <div v-for="item in scope.row.section" :key="item._id" class="text">
                        <span>{{ `${item.max_value}` }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="220" align='center'>
                <template #default="scope">
                    <el-button type="primary" link :icon="View" @click="openDialog('查看', scope)"> 查看 </el-button>
                    <el-button type="primary" link :icon="EditPen" @click="openDialog('编辑', scope)"> 编辑 </el-button>
                    <el-button type="primary" link :icon="Delete" @click="deleteAccount(scope.row)"> 删除 </el-button>
                </template>
            </el-table-column>
        </SqTable>

        <!-- 弹窗 -->
        <MedicineDialog ref="dialogRef" />
    </div>
</template>

<script setup lang="tsx" name="MemberManage">
import { useHandleData } from '@/hooks/useHandleData'
import MedicineDialog from '@/views/medicine/medicineDialog/medicineDialog.vue'
import { getMedicineListApi, addMedicineApi, deleteMedicineApi } from "@/api/modules";
import { CirclePlus, View, EditPen, Delete } from "@element-plus/icons-vue";
import SqTable from '@/components/SqTable/index.vue'
import { reactive, ref } from "vue";


const sqTable = ref()
// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({
    name: "测试",
    family: "X",
    item_code: "",
    item_value: "",
    system: "",
    type: "医学",
});

// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
const getTableList = (params: any) => {
    return getMedicineListApi(params);
};


// 打开 drawer(新增、查看、编辑)
const dialogRef = ref();
const openDialog = (title: string, scope?: any) => {
    const params = {
        title,
        isView: title === "查看",
        row: { ...scope?.row },
        api: title === "新增" ? addMedicineApi : title === "编辑" ? addMedicineApi : undefined,
        getTableList: sqTable.value?.getTableList
    };
    dialogRef.value?.acceptParams(params);
};

// 删除用户信息
const deleteAccount = async (params: any) => {
    console.log(params);
    await useHandleData(deleteMedicineApi, params._id, `删除【${params.name}】常数`);
    sqTable.value?.getTableList();
};


// 批量删除用户信息
const batchDelete = async (id: string[]) => {
    console.log(id)
    // await useHandleData(deleteUser, { id }, "删除所选用户信息");
    // sqTable.value?.clearSelection();
    // sqTable.value?.getTableList();
};

</script>

<style scoped lang="scss">
@import "./medicine.scss";
</style>